<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>快速搭建文档 | Guru Note</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="stylesheet" href="./font/index.css">
    <script src="/docs/icon/svg.js"></script>
    <meta name="description" content="Sea of dawn">
    
    <link rel="preload" href="/docs/assets/css/0.styles.efa081cd.css" as="style"><link rel="preload" href="/docs/assets/js/app.cdec4db9.js" as="script"><link rel="preload" href="/docs/assets/js/2.993bd611.js" as="script"><link rel="preload" href="/docs/assets/js/125.4e36fe37.js" as="script"><link rel="preload" href="/docs/assets/js/7.5a12abef.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.c3177bdb.js"><link rel="prefetch" href="/docs/assets/js/100.60c23478.js"><link rel="prefetch" href="/docs/assets/js/101.7ea29e1b.js"><link rel="prefetch" href="/docs/assets/js/102.7f47e485.js"><link rel="prefetch" href="/docs/assets/js/103.ea9ce400.js"><link rel="prefetch" href="/docs/assets/js/104.4ec6a518.js"><link rel="prefetch" href="/docs/assets/js/105.75526347.js"><link rel="prefetch" href="/docs/assets/js/106.01f6b03b.js"><link rel="prefetch" href="/docs/assets/js/107.69fe0811.js"><link rel="prefetch" href="/docs/assets/js/108.fa23768b.js"><link rel="prefetch" href="/docs/assets/js/109.90df1698.js"><link rel="prefetch" href="/docs/assets/js/11.54347528.js"><link rel="prefetch" href="/docs/assets/js/110.dd8d7227.js"><link rel="prefetch" href="/docs/assets/js/111.ccf25ceb.js"><link rel="prefetch" href="/docs/assets/js/112.6963298f.js"><link rel="prefetch" href="/docs/assets/js/113.30ceb3d8.js"><link rel="prefetch" href="/docs/assets/js/114.42ef6603.js"><link rel="prefetch" href="/docs/assets/js/115.f1db7817.js"><link rel="prefetch" href="/docs/assets/js/116.92971223.js"><link rel="prefetch" href="/docs/assets/js/117.c5a65e7e.js"><link rel="prefetch" href="/docs/assets/js/118.e329035d.js"><link rel="prefetch" href="/docs/assets/js/119.cbb17c5e.js"><link rel="prefetch" href="/docs/assets/js/12.c8144ee8.js"><link rel="prefetch" href="/docs/assets/js/120.8537f6a6.js"><link rel="prefetch" href="/docs/assets/js/121.257d3851.js"><link rel="prefetch" href="/docs/assets/js/122.96a5f921.js"><link rel="prefetch" href="/docs/assets/js/123.2220fd12.js"><link rel="prefetch" href="/docs/assets/js/124.552b1a29.js"><link rel="prefetch" href="/docs/assets/js/126.3939cdcc.js"><link rel="prefetch" href="/docs/assets/js/127.014df434.js"><link rel="prefetch" href="/docs/assets/js/13.edc237a8.js"><link rel="prefetch" href="/docs/assets/js/14.66270d4f.js"><link rel="prefetch" href="/docs/assets/js/15.0804164b.js"><link rel="prefetch" href="/docs/assets/js/16.dec928ab.js"><link rel="prefetch" href="/docs/assets/js/17.bbfc90a8.js"><link rel="prefetch" href="/docs/assets/js/18.76904860.js"><link rel="prefetch" href="/docs/assets/js/19.80a98011.js"><link rel="prefetch" href="/docs/assets/js/20.c39e42bd.js"><link rel="prefetch" href="/docs/assets/js/21.287b744a.js"><link rel="prefetch" href="/docs/assets/js/22.c9506be7.js"><link rel="prefetch" href="/docs/assets/js/23.9732a229.js"><link rel="prefetch" href="/docs/assets/js/24.21ed1f05.js"><link rel="prefetch" href="/docs/assets/js/25.8f1926f6.js"><link rel="prefetch" href="/docs/assets/js/26.61b6eb9f.js"><link rel="prefetch" href="/docs/assets/js/27.3706753c.js"><link rel="prefetch" href="/docs/assets/js/28.b6b182cf.js"><link rel="prefetch" href="/docs/assets/js/29.ae979ad9.js"><link rel="prefetch" href="/docs/assets/js/3.a7f8dd77.js"><link rel="prefetch" href="/docs/assets/js/30.f2233269.js"><link rel="prefetch" href="/docs/assets/js/31.06780314.js"><link rel="prefetch" href="/docs/assets/js/32.2dad91d1.js"><link rel="prefetch" href="/docs/assets/js/33.87ec6e22.js"><link rel="prefetch" href="/docs/assets/js/34.7b75f220.js"><link rel="prefetch" href="/docs/assets/js/35.3184991f.js"><link rel="prefetch" href="/docs/assets/js/36.28248fbe.js"><link rel="prefetch" href="/docs/assets/js/37.5824a979.js"><link rel="prefetch" href="/docs/assets/js/38.99a364fe.js"><link rel="prefetch" href="/docs/assets/js/39.a5f43732.js"><link rel="prefetch" href="/docs/assets/js/4.a55d89ed.js"><link rel="prefetch" href="/docs/assets/js/40.629f78f7.js"><link rel="prefetch" href="/docs/assets/js/41.e4f58d1c.js"><link rel="prefetch" href="/docs/assets/js/42.9f41aa47.js"><link rel="prefetch" href="/docs/assets/js/43.636412b6.js"><link rel="prefetch" href="/docs/assets/js/44.3b491aef.js"><link rel="prefetch" href="/docs/assets/js/45.77df19bc.js"><link rel="prefetch" href="/docs/assets/js/46.01f53ddd.js"><link rel="prefetch" href="/docs/assets/js/47.476e85c9.js"><link rel="prefetch" href="/docs/assets/js/48.198502dc.js"><link rel="prefetch" href="/docs/assets/js/49.0d59d332.js"><link rel="prefetch" href="/docs/assets/js/5.1597c0f8.js"><link rel="prefetch" href="/docs/assets/js/50.02baf101.js"><link rel="prefetch" href="/docs/assets/js/51.c9fbd54d.js"><link rel="prefetch" href="/docs/assets/js/52.4cb4459b.js"><link rel="prefetch" href="/docs/assets/js/53.248450d7.js"><link rel="prefetch" href="/docs/assets/js/54.83f12d1e.js"><link rel="prefetch" href="/docs/assets/js/55.b18accba.js"><link rel="prefetch" href="/docs/assets/js/56.8a160b09.js"><link rel="prefetch" href="/docs/assets/js/57.b854a940.js"><link rel="prefetch" href="/docs/assets/js/58.4500f315.js"><link rel="prefetch" href="/docs/assets/js/59.59400e36.js"><link rel="prefetch" href="/docs/assets/js/6.887ba020.js"><link rel="prefetch" href="/docs/assets/js/60.4dd5b5bb.js"><link rel="prefetch" href="/docs/assets/js/61.50d8c8f6.js"><link rel="prefetch" href="/docs/assets/js/62.17d10daa.js"><link rel="prefetch" href="/docs/assets/js/63.d5f821cc.js"><link rel="prefetch" href="/docs/assets/js/64.7bf2519f.js"><link rel="prefetch" href="/docs/assets/js/65.0a1c9bc8.js"><link rel="prefetch" href="/docs/assets/js/66.1bcaa81c.js"><link rel="prefetch" href="/docs/assets/js/67.326bdf9b.js"><link rel="prefetch" href="/docs/assets/js/68.2b3b63b2.js"><link rel="prefetch" href="/docs/assets/js/69.c9b1a1a9.js"><link rel="prefetch" href="/docs/assets/js/70.a5fede78.js"><link rel="prefetch" href="/docs/assets/js/71.288d9643.js"><link rel="prefetch" href="/docs/assets/js/72.8665d6b8.js"><link rel="prefetch" href="/docs/assets/js/73.47155429.js"><link rel="prefetch" href="/docs/assets/js/74.4d4738f8.js"><link rel="prefetch" href="/docs/assets/js/75.659a325f.js"><link rel="prefetch" href="/docs/assets/js/76.a263f692.js"><link rel="prefetch" href="/docs/assets/js/77.9d86d59e.js"><link rel="prefetch" href="/docs/assets/js/78.a41b5d88.js"><link rel="prefetch" href="/docs/assets/js/79.5d0fc4cc.js"><link rel="prefetch" href="/docs/assets/js/8.80d0c81d.js"><link rel="prefetch" href="/docs/assets/js/80.01a11f6a.js"><link rel="prefetch" href="/docs/assets/js/81.9c0207d9.js"><link rel="prefetch" href="/docs/assets/js/82.12be8e04.js"><link rel="prefetch" href="/docs/assets/js/83.00fa5f46.js"><link rel="prefetch" href="/docs/assets/js/84.f14cd53c.js"><link rel="prefetch" href="/docs/assets/js/85.e9d7c0d1.js"><link rel="prefetch" href="/docs/assets/js/86.eb78fbbf.js"><link rel="prefetch" href="/docs/assets/js/87.8a31f5ae.js"><link rel="prefetch" href="/docs/assets/js/88.0f10e6dc.js"><link rel="prefetch" href="/docs/assets/js/89.a17253c9.js"><link rel="prefetch" href="/docs/assets/js/9.2fa568cb.js"><link rel="prefetch" href="/docs/assets/js/90.e56bc609.js"><link rel="prefetch" href="/docs/assets/js/91.5277db18.js"><link rel="prefetch" href="/docs/assets/js/92.b0bb8aa7.js"><link rel="prefetch" href="/docs/assets/js/93.cd790b77.js"><link rel="prefetch" href="/docs/assets/js/94.76bbe227.js"><link rel="prefetch" href="/docs/assets/js/95.4f07ca32.js"><link rel="prefetch" href="/docs/assets/js/96.2b1e8485.js"><link rel="prefetch" href="/docs/assets/js/97.e93b3461.js"><link rel="prefetch" href="/docs/assets/js/98.658063a1.js"><link rel="prefetch" href="/docs/assets/js/99.a3642e6d.js">
    <link rel="stylesheet" href="/docs/assets/css/0.styles.efa081cd.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><!----> <span class="site-name">Guru Note</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----> <svg aria-hidden="true" class="icon search-icon"><use xlink:href="#icon-search"></use></svg></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/layout/" class="nav-link">
  CSS 手册
</a></div><div class="nav-item"><a href="/docs/js/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          前端框架
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/vue/" class="nav-link router-link-active">
  Vue.js
</a></li><li class="dropdown-subitem"><a href="/docs/react/" class="nav-link">
  React.js
</a></li></ul></li><li class="dropdown-item"><h4>
          拓展语言
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/node/" class="nav-link">
  Node.js
</a></li><li class="dropdown-subitem"><a href="/docs/ts/" class="nav-link">
  TypeScript
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/docs/devbook/" class="nav-link">
  开发手册
</a></div><div class="nav-item"><a href="/docs/exam/" class="nav-link">
  金九银十
</a></div><div class="nav-item"><a href="/docs/message/" class="nav-link">
  留言板
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><div class="el-scrollbar"><div class="scrollbar-wrapper el-scrollbar__wrap el-scrollbar__wrap--hidden-default"><div class="el-scrollbar__view"><nav class="nav-links"><div class="nav-item"><a href="/docs/layout/" class="nav-link">
  CSS 手册
</a></div><div class="nav-item"><a href="/docs/js/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          前端框架
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/vue/" class="nav-link router-link-active">
  Vue.js
</a></li><li class="dropdown-subitem"><a href="/docs/react/" class="nav-link">
  React.js
</a></li></ul></li><li class="dropdown-item"><h4>
          拓展语言
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/node/" class="nav-link">
  Node.js
</a></li><li class="dropdown-subitem"><a href="/docs/ts/" class="nav-link">
  TypeScript
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/docs/devbook/" class="nav-link">
  开发手册
</a></div><div class="nav-item"><a href="/docs/exam/" class="nav-link">
  金九银十
</a></div><div class="nav-item"><a href="/docs/message/" class="nav-link">
  留言板
</a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/docs/vue/" aria-current="page" class="sidebar-link">说明</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Vue 2.0 全解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/vue/options.html" class="sidebar-link">Vue 简介 &amp; 构造选项</a></li><li><a href="/docs/vue/responsive.html" class="sidebar-link">Vue 数据响应式</a></li><li><a href="/docs/vue/computed-and-watch.html" class="sidebar-link">Vue 计算属性和监听器</a></li><li><a href="/docs/vue/template-instruction-modifier.html" class="sidebar-link">Vue 模板、指令与修饰符</a></li><li><a href="/docs/vue/advanced-options.html" class="sidebar-link">Vue 进阶属性</a></li><li><a href="/docs/vue/prop.html" class="sidebar-link">Vue Prop 自定义属性</a></li><li><a href="/docs/vue/form-and-model.html" class="sidebar-link">Vue 表单与输入绑定</a></li><li><a href="/docs/vue/router.html" class="sidebar-link">Vue Router 的原理</a></li><li><a href="/docs/vue/transition.html" class="sidebar-link">Vue 动画原理</a></li><li><a href="/docs/vue/tree-component.html" class="sidebar-link">递归组件</a></li><li><a href="/docs/vue/plugin.html" class="sidebar-link">Vue 常用插件</a></li><li><a href="/docs/vue/create-project.html" class="sidebar-link">Vue 快速搭建项目</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>VuePress</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/vue/vuepress/started.html" aria-current="page" class="active sidebar-link">快速搭建文档</a></li><li><a href="/docs/vue/vuepress/markdown.html" class="sidebar-link">Markdown 语法拓展</a></li><li><a href="/docs/vue/vuepress/element-ui.html" class="sidebar-link">添加 Element 组件</a></li><li><a href="/docs/vue/vuepress/file-path.html" class="sidebar-link">关于文件路径</a></li></ul></section></li></ul> </div></div><div class="el-scrollbar__bar is-horizontal"><div class="el-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical"><div class="el-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div></div></aside> <main class="page"> <div class="re-page-top"><h1 class="title"><span>快速搭建文档</span></h1> <div class="re-page-index"><div class="page-index-title"><span class="open-catalog"><svg aria-hidden="true" class="icon arrow-right"><use xlink:href="#icon-bold-right"></use></svg> <span class="text">目录</span></span></div> <div class="page-index-content"><div class="page-catalog" style="display:none;"><div class="synopsis-wrap"><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#新建一个项目" class="synopsis-link">新建一个项目</a></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#目录结构" class="synopsis-link">目录结构</a></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#导航栏" class="synopsis-link">导航栏</a></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#侧边栏" class="synopsis-link">侧边栏</a><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#属性说明" class="synopsis-link">属性说明</a></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#分离配置文件" class="synopsis-link">分离配置文件</a></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#一个简单的配置案例" class="synopsis-link">一个简单的配置案例</a></li></ul></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#默认样式修改" class="synopsis-link">默认样式修改</a><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#palette-styl" class="synopsis-link">palette.styl</a></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#index-styl" class="synopsis-link">index.styl</a></li></ul></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#安装插件" class="synopsis-link">安装插件</a><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#默认主题自带的插件" class="synopsis-link">默认主题自带的插件</a></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#平滑滚动" class="synopsis-link">平滑滚动</a></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#图片点击缩放" class="synopsis-link">图片点击缩放</a></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#自动生成当前页目录" class="synopsis-link">自动生成当前页目录</a></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#根据页面滚动自动激活当前标题" class="synopsis-link">根据页面滚动自动激活当前标题</a></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#返回顶部" class="synopsis-link">返回顶部</a></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#valine-评论" class="synopsis-link">Valine 评论</a></li></ul></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#拓展" class="synopsis-link">拓展</a><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#修改默认主题" class="synopsis-link">修改默认主题</a></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#修复不会自动跳转至指定锚点-bug" class="synopsis-link">修复不会自动跳转至指定锚点 BUG</a></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#自定义页面类" class="synopsis-link">自定义页面类</a></li><li class="synopsis-li"><a href="/docs/vue/vuepress/started.html#特定页面的自定义布局" class="synopsis-link">特定页面的自定义布局</a></li></ul></li></ul></div></div></div></div></div> <div class="theme-default-content content__default"><h2 id="新建一个项目"><a href="#新建一个项目" class="header-anchor">#</a> 新建一个项目</h2> <p>创建并进入一个新目录</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">mkdir</span> vuepress-starter <span class="token operator">&amp;&amp;</span> <span class="token builtin class-name">cd</span> vuepress-starter
</code></pre></div><p>使用你喜欢的包管理器进行初始化</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">yarn</span> init <span class="token comment"># npm init</span>
</code></pre></div><p>将 VuePress 安装为本地依赖（不推荐全局安装 VuePress）</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">yarn</span> <span class="token function">add</span> -D vuepress <span class="token comment"># npm install -D vuepress</span>
</code></pre></div><p>创建你的第一篇文档</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">mkdir</span> docs <span class="token operator">&amp;&amp;</span> <span class="token builtin class-name">echo</span> <span class="token string">'# Hello VuePress'</span> <span class="token operator">&gt;</span> docs/README.md
</code></pre></div><p>在 <code>package.json</code> 中添加一些 <a href="https://classic.yarnpkg.com/zh-Hans/docs/package-json#toc-scripts" target="_blank" rel="noopener noreferrer">scripts<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;docs:dev&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress dev docs&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;docs:build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress build docs&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>启动一个本地服务器</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">yarn</span> docs:dev <span class="token comment"># npm run docs:dev</span>
</code></pre></div><h2 id="目录结构"><a href="#目录结构" class="header-anchor">#</a> 目录结构</h2> <div class="language-text extra-class"><pre class="language-text"><code>.
├─ docs
│  ├─ README.md                # 首页文档设置
│  └─ .vuepress
│     ├─ components            # 自动全局注册的组件
│     ├─ public                # 存放公共文件，如图片、图标的引入
│     ├─ styles                # 公共样式修改
│     │  ├── index.styl
│     │  └── palette.styl
│     ├─ enhanceApp.js         # 引入外部JS文件
│     └─ config.js             # 默认配置选项
└─ package.json
</code></pre></div><h2 id="导航栏"><a href="#导航栏" class="header-anchor">#</a> 导航栏</h2> <p>你可以通过 <code>themeConfig.nav</code> 增加一些导航栏链接:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    nav<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Home'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Guide'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/guide/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'External'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'https://google.com'</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>外部链接 <code>&lt;a&gt;</code> 标签的特性将默认包含<code>target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;</code>，你可以提供 <code>target</code> 与 <code>rel</code>，它们将被作为特性被增加到 <code>&lt;a&gt;</code> 标签上：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/config.js</span>
nav<span class="token operator">:</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'External'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'https://google.com'</span><span class="token punctuation">,</span> target<span class="token operator">:</span> <span class="token string">'_self'</span><span class="token punctuation">,</span> rel<span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Guide'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/guide/'</span><span class="token punctuation">,</span> target<span class="token operator">:</span> <span class="token string">'_blank'</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</code></pre></div><p>当你提供了一个 <code>items</code> 数组而不是一个单一的 <code>link</code> 时，它将显示为一个 <code>下拉列表</code> ：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/config.js</span>
nav<span class="token operator">:</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    text<span class="token operator">:</span> <span class="token string">'Languages'</span><span class="token punctuation">,</span>
    ariaLabel<span class="token operator">:</span> <span class="token string">'Language Menu'</span><span class="token punctuation">,</span>
    items<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Chinese'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/language/chinese/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Japanese'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/language/japanese/'</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</code></pre></div><p>设置下拉列表分组</p> <div class="language-js extra-class"><pre class="language-js"><code>nav<span class="token operator">:</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Home'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    text<span class="token operator">:</span> <span class="token string">'more'</span><span class="token punctuation">,</span>
    items<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        text<span class="token operator">:</span> <span class="token string">'Group1'</span><span class="token punctuation">,</span>
        items<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'one'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/one/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'two'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/two/'</span> <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        text<span class="token operator">:</span> <span class="token string">'Group2'</span><span class="token punctuation">,</span>
        items<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'one'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/one/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'two'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/two/'</span> <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="侧边栏"><a href="#侧边栏" class="header-anchor">#</a> 侧边栏</h2> <h3 id="属性说明"><a href="#属性说明" class="header-anchor">#</a> 属性说明</h3> <p><strong>collapsable</strong></p> <p>可折叠性，默认可折叠(<code>true</code>) 你可以设置 <code>collapsable: false</code> 来让一个组永远都是展开状态。</p> <p><strong>activeHeaderLinks</strong></p> <p>根据滚动激活侧栏标题，默认是 <code>true</code>，可设置 <code>false</code> 关闭这个选项</p> <h3 id="分离配置文件"><a href="#分离配置文件" class="header-anchor">#</a> 分离配置文件</h3> <p>你也可以将导航栏与侧边栏的配置单独存放，在 <code>config.js</code> 中引入即可</p> <p>新建一个 <code>nav.js</code> 并使用 <code>module.export</code> 导出</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    text<span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>
    link<span class="token operator">:</span> <span class="token string">'/foo/'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    text<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
    link<span class="token operator">:</span> <span class="token string">'/bar/'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    text<span class="token operator">:</span> <span class="token string">'more'</span><span class="token punctuation">,</span>
    items<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        text<span class="token operator">:</span> <span class="token string">'Group1'</span><span class="token punctuation">,</span>
        items<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'one'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/one/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'two'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/two/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        text<span class="token operator">:</span> <span class="token string">'Group2'</span><span class="token punctuation">,</span>
        items<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'one'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/one/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'two'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/two/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</code></pre></div><p>新建一个 <code>sidebar.js</code> 并使用 <code>module.export</code> 导出</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token string">'/foo/'</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// README.md</span>
    <span class="token punctuation">{</span>
      collapsable<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 设置侧栏展开</span>
      title<span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>
      children<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token string">'one'</span><span class="token punctuation">,</span> <span class="token comment">// one.md</span>
        <span class="token string">'two'</span><span class="token punctuation">,</span> <span class="token comment">// two.md</span>
        <span class="token string">'three'</span> <span class="token comment">// three.md</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token string">'/bar/'</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// README.md</span>
    <span class="token punctuation">{</span>
      collapsable<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 设置侧栏展开</span>
      title<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
      children<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token string">'one'</span><span class="token punctuation">,</span> <span class="token comment">// one.md</span>
        <span class="token string">'two'</span><span class="token punctuation">,</span> <span class="token comment">// two.md</span>
        <span class="token string">'three'</span> <span class="token comment">// three.md</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="一个简单的配置案例"><a href="#一个简单的配置案例" class="header-anchor">#</a> 一个简单的配置案例</h3> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  base<span class="token operator">:</span> <span class="token string">'/doc/'</span><span class="token punctuation">,</span>
  title<span class="token operator">:</span> <span class="token string">'GunnyBag'</span><span class="token punctuation">,</span>
  description<span class="token operator">:</span> <span class="token string">'Collect frequently used front-end notes'</span><span class="token punctuation">,</span>
  <span class="token comment">/* 在head中添加标签 */</span>
  head<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span><span class="token string">'script'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> src<span class="token operator">:</span> <span class="token string">'/icon.js'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>           <span class="token comment">// 引入icon图标</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">/* 开启平滑滚动 */</span>
    smoothScroll<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">/* 侧栏显示标题深度 */</span>
    sidebarDepth<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
    <span class="token comment">/* 搜索显示条目数 */</span>
    searchMaxSuggestions<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
    nav<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Home'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/foo/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/bar/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    sidebar<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token string">'/foo/'</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token string">''</span><span class="token punctuation">,</span>                                <span class="token comment">// README.md</span>
        <span class="token punctuation">{</span>
          collapsable<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>            <span class="token comment">// 设置侧栏展开</span>
          title<span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>
          children<span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token string">'one'</span><span class="token punctuation">,</span>                     <span class="token comment">// one.md</span>
            <span class="token string">'two'</span><span class="token punctuation">,</span>                     <span class="token comment">// two.md</span>
            <span class="token string">'three'</span><span class="token punctuation">,</span>                   <span class="token comment">// three.md</span>
          <span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token string">'/bar/'</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token string">''</span><span class="token punctuation">,</span>                                <span class="token comment">// README.md</span>
        <span class="token punctuation">{</span>
          collapsable<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>            <span class="token comment">// 设置侧栏展开</span>
          title<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
          children<span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token string">'one'</span><span class="token punctuation">,</span>                     <span class="token comment">// one.md</span>
            <span class="token string">'two'</span><span class="token punctuation">,</span>                     <span class="token comment">// two.md</span>
            <span class="token string">'three'</span><span class="token punctuation">,</span>                   <span class="token comment">// three.md</span>
          <span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
  <span class="token comment">/* 添加插件 */</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span><span class="token string">'vuepress-plugin-smooth-scroll'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">注意</p> <p>本地侧栏的根路径下必须要有一个 <code>README.md</code> 文件，防止无法跳转至该目录。</p></div> <h2 id="默认样式修改"><a href="#默认样式修改" class="header-anchor">#</a> 默认样式修改</h2> <h3 id="palette-styl"><a href="#palette-styl" class="header-anchor">#</a> palette.styl</h3> <p>如果要对<a href="https://github.com/vuejs/vuepress/blob/master/packages/@vuepress/core/lib/client/style/config.styl" target="_blank" rel="noopener noreferrer">默认预设<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>的样式进行简单的替换，或者定义一些变量供以后使用，你可以创建一个 <code>.vuepress/styles/palette.styl</code> 文件。</p> <p>你可以调整的一些变量如下:</p> <div class="language-stylus extra-class"><pre class="language-stylus"><code><span class="token comment">// 颜色</span>
<span class="token variable-declaration"><span class="token variable">$accentColor</span> <span class="token operator">=</span> <span class="token hexcode">#3eaf7c</span></span>
<span class="token variable-declaration"><span class="token variable">$textColor</span> <span class="token operator">=</span> <span class="token hexcode">#2c3e50</span></span>
<span class="token variable-declaration"><span class="token variable">$borderColor</span> <span class="token operator">=</span> <span class="token hexcode">#eaecef</span></span>
<span class="token variable-declaration"><span class="token variable">$codeBgColor</span> <span class="token operator">=</span> <span class="token hexcode">#282c34</span></span>
<span class="token variable-declaration"><span class="token variable">$arrowBgColor</span> <span class="token operator">=</span> <span class="token hexcode">#ccc</span></span>
<span class="token variable-declaration"><span class="token variable">$badgeTipColor</span> <span class="token operator">=</span> <span class="token hexcode">#42b983</span></span>
<span class="token variable-declaration"><span class="token variable">$badgeWarningColor</span> <span class="token operator">=</span> <span class="token func"><span class="token function">darken</span><span class="token punctuation">(</span><span class="token hexcode">#ffe564</span><span class="token punctuation">,</span> <span class="token number">35</span><span class="token unit">%</span><span class="token punctuation">)</span></span></span>
<span class="token variable-declaration"><span class="token variable">$badgeErrorColor</span> <span class="token operator">=</span> <span class="token hexcode">#DA5961</span></span>

<span class="token comment">// 布局</span>
<span class="token variable-declaration"><span class="token variable">$navbarHeight</span> <span class="token operator">=</span> <span class="token number">3.6</span><span class="token unit">rem</span></span>
<span class="token variable-declaration"><span class="token variable">$sidebarWidth</span> <span class="token operator">=</span> <span class="token number">20</span><span class="token unit">rem</span></span>
<span class="token variable-declaration"><span class="token variable">$contentWidth</span> <span class="token operator">=</span> <span class="token number">740</span><span class="token unit">px</span></span>
<span class="token variable-declaration"><span class="token variable">$homePageWidth</span> <span class="token operator">=</span> <span class="token number">960</span><span class="token unit">px</span></span>

<span class="token comment">// 响应式变化点</span>
<span class="token variable-declaration"><span class="token variable">$MQNarrow</span> <span class="token operator">=</span> <span class="token number">959</span><span class="token unit">px</span></span>
<span class="token variable-declaration"><span class="token variable">$MQMobile</span> <span class="token operator">=</span> <span class="token number">719</span><span class="token unit">px</span></span>
<span class="token variable-declaration"><span class="token variable">$MQMobileNarrow</span> <span class="token operator">=</span> <span class="token number">419</span><span class="token unit">px</span></span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">注意</p> <p>你应该<strong>只在</strong>这个文件中定义变量。因为 <code>palette.styl</code> 将在根的 stylus 配置文件的末尾引入，作为配置，它将被多个文件使用，所以一旦你在这里写了样式，你的样式就会被多次复制。</p></div> <h3 id="index-styl"><a href="#index-styl" class="header-anchor">#</a> index.styl</h3> <p>VuePress 提供了一种添加额外样式的简便方法。你可以创建一个 <code>.vuepress/styles/index.styl</code> 文件。这是一个 <a href="http://stylus-lang.com/" target="_blank" rel="noopener noreferrer">Stylus<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 文件，但你也可以使用正常的 CSS 语法。</p> <div class="language-stylus extra-class"><pre class="language-stylus"><code><span class="token selector">.content <span class="token punctuation">{</span></span>
  <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">30</span><span class="token unit">px</span></span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="安装插件"><a href="#安装插件" class="header-anchor">#</a> 安装插件</h2> <h3 id="默认主题自带的插件"><a href="#默认主题自带的插件" class="header-anchor">#</a> 默认主题自带的插件</h3> <ul><li><a href="https://vuepress.vuejs.org/zh/plugin/official/plugin-active-header-links.html" target="_blank" rel="noopener noreferrer">@vuepress/plugin-active-header-links<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://vuepress.vuejs.org/zh/plugin/official/plugin-nprogress.html" target="_blank" rel="noopener noreferrer">@vuepress/plugin-nprogress<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://vuepress.vuejs.org/zh/plugin/official/plugin-search.html" target="_blank" rel="noopener noreferrer">@vuepress/plugin-search<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://vuepress.github.io/zh/plugins/container/" target="_blank" rel="noopener noreferrer">vuepress-plugin-container<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://vuepress.github.io/zh/plugins/smooth-scroll/" target="_blank" rel="noopener noreferrer">vuepress-plugin-smooth-scroll<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <blockquote><p>默认主题自带插件均无需安装，直接配置即可。</p></blockquote> <h3 id="平滑滚动"><a href="#平滑滚动" class="header-anchor">#</a> 平滑滚动</h3> <p>默认主题在 <code>config.js</code> 配置开启该项即可</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">/* 开启平滑滚动 */</span>
    smoothScroll<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><p>安装</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">yarn</span> <span class="token function">add</span> -D vuepress-plugin-smooth-scroll
<span class="token comment"># OR npm install -D vuepress-plugin-smooth-scroll</span>
</code></pre></div><p>添加配置</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'vuepress-plugin-smooth-scroll'</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="图片点击缩放"><a href="#图片点击缩放" class="header-anchor">#</a> 图片点击缩放</h3> <p>安装</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">yarn</span> <span class="token function">add</span> -D vuepress-plugin-zooming
<span class="token comment"># OR npm install -D vuepress-plugin-zooming</span>
</code></pre></div><p>添加配置</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span>
      <span class="token string">'vuepress-plugin-zooming'</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        selector<span class="token operator">:</span> <span class="token string">'.page img'</span><span class="token punctuation">,</span>
        delay<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
        options<span class="token operator">:</span> <span class="token punctuation">{</span>
          bgColor<span class="token operator">:</span> <span class="token string">'black'</span><span class="token punctuation">,</span>
          zIndex<span class="token operator">:</span> <span class="token number">10000</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="自动生成当前页目录"><a href="#自动生成当前页目录" class="header-anchor">#</a> 自动生成当前页目录</h3> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">yarn</span> <span class="token function">add</span> -D vuepress-plugin-table-of-contents
<span class="token comment"># OR npm install -D vuepress-plugin-table-of-contents</span>
</code></pre></div><p>使用</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'vuepress-plugin-table-of-contents'</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><p>该组件会为你注册一个 <code>&lt;TOC /&gt;</code> 组件，该组件展示你当前页面文章的目录，你可以在 Markdown 文件和 Vue 文件中使用它。</p> <div class="language-md extra-class"><pre class="language-md"><code><span class="token comment">&lt;!-- README.md / Component.vue --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TOC</span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div><ul><li>官方文档：https://vuepress.github.io/zh/plugins/table-of-contents/</li></ul> <h3 id="根据页面滚动自动激活当前标题"><a href="#根据页面滚动自动激活当前标题" class="header-anchor">#</a> 根据页面滚动自动激活当前标题</h3> <p>默认主题自带插件</p> <p>安装</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">yarn</span> <span class="token function">add</span> -D @vuepress/plugin-active-header-links
<span class="token comment"># OR npm install -D @vuepress/plugin-active-header-links</span>
</code></pre></div><p>默认配置</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">'@vuepress/active-header-links'</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      sidebarLinkSelector<span class="token operator">:</span> <span class="token string">'.sidebar-link'</span><span class="token punctuation">,</span>
      headerAnchorSelector<span class="token operator">:</span> <span class="token string">'.header-anchor'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>配合 上面的生成目录 插件使用</strong></p> <p>Vue 文件</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TOC</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>re-toc<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>配置</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">'@vuepress/active-header-links'</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> sidebarLinkSelector<span class="token operator">:</span> <span class="token string">'.re-toc a'</span> <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><p>当滚动到当前标题时，该标题的目录链接<code>&lt;a&gt;</code>标签会添加 <code>class=&quot;router-link-exact-active router-link-active&quot;</code> 的样式</p> <h3 id="返回顶部"><a href="#返回顶部" class="header-anchor">#</a> 返回顶部</h3> <p><strong>安装</strong></p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">yarn</span> <span class="token function">add</span> -D @vuepress/plugin-back-to-top
<span class="token comment"># OR npm install -D @vuepress/plugin-back-to-top</span>
</code></pre></div><p><strong>使用</strong></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'@vuepress/back-to-top'</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="valine-评论"><a href="#valine-评论" class="header-anchor">#</a> Valine 评论</h3> <p>只支持单个页面引入</p> <p>安装</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">yarn</span> <span class="token function">add</span> valine
<span class="token comment"># or npm install valine</span>
</code></pre></div><p>创建 <code>.vuepress/components/MessageLayout.vue</code> 组件，添加如下内容</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>message-valine<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> Valine <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'valine'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> window <span class="token operator">!==</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>window <span class="token operator">=</span> window
    <span class="token punctuation">}</span>
    <span class="token keyword">new</span> <span class="token class-name">Valine</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      el<span class="token operator">:</span><span class="token string">'#message-valine'</span><span class="token punctuation">,</span>
      appId<span class="token operator">:</span> <span class="token string">'xxx'</span><span class="token punctuation">,</span>
      appKey<span class="token operator">:</span> <span class="token string">'xxx'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>创建 <code>docs/message/README.md</code> 页面，添加如下内容</p> <div class="language-md extra-class"><pre class="language-md"><code><span class="token hr punctuation">---</span>
title: 留言板
<span class="token title important">sidebar: false
<span class="token punctuation">---</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MessageValine</span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div><p>在 config.js 中引入该页面</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    sidebar<span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token string">'/message/'</span><span class="token operator">:</span> <span class="token string">''</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="拓展"><a href="#拓展" class="header-anchor">#</a> 拓展</h2> <h3 id="修改默认主题"><a href="#修改默认主题" class="header-anchor">#</a> 修改默认主题</h3> <p>将 VuePress 默认主题文件拷贝至 <code>docs/.vuepress/theme</code></p> <div class="language-sh extra-class"><pre class="language-sh"><code>vuepress <span class="token function">eject</span> docs
</code></pre></div><h3 id="修复不会自动跳转至指定锚点-bug"><a href="#修复不会自动跳转至指定锚点-bug" class="header-anchor">#</a> 修复不会自动跳转至指定锚点 BUG</h3> <p>在<code>Layout.vue</code>中添加以下代码</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// ...</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token parameter">selector</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>selector <span class="token operator">||</span> selector <span class="token operator">===</span> <span class="token string">'#'</span><span class="token punctuation">)</span> <span class="token keyword">return</span>
      <span class="token keyword">const</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token function">decodeURIComponent</span><span class="token punctuation">(</span>selector<span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>el <span class="token operator">&amp;&amp;</span> el<span class="token punctuation">.</span>offsetTop<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        window<span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> el<span class="token punctuation">.</span>offsetTop<span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span>location<span class="token punctuation">.</span>hash<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="自定义页面类"><a href="#自定义页面类" class="header-anchor">#</a> 自定义页面类</h3> <p>有时候你可能需要为特定页面添加一个 CSS 类名，以方便针对该页面添加一些专门的 CSS。这种情况下你可以在该页面的 YAML front matter 中声明一个 <code>pageClass</code>：</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token punctuation">---</span>
<span class="token key atrule">pageClass</span><span class="token punctuation">:</span> custom<span class="token punctuation">-</span>page<span class="token punctuation">-</span>class
<span class="token punctuation">---</span>

</code></pre></div><p>然后你就可以写专门针对该页面的 CSS 了：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* .vuepress/override.styl */</span>

<span class="token selector">.theme-container.custom-page-class</span> <span class="token punctuation">{</span>
  <span class="token comment">/* 特定页面的 CSS */</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="特定页面的自定义布局"><a href="#特定页面的自定义布局" class="header-anchor">#</a> 特定页面的自定义布局</h3> <p>默认情况下，每个 <code>*.md</code> 文件将会被渲染在一个 <code>&lt;div class=&quot;page&quot;&gt;</code> 容器中，同时还有侧边栏、自动生成的编辑链接，以及上 / 下一篇文章的链接。如果你想要使用一个完全自定义的组件来代替当前的页面（而只保留导航栏），你可以再次使用 <code>YAML front matter</code> 来指定这个组件。</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token punctuation">---</span>
<span class="token key atrule">layout</span><span class="token punctuation">:</span> SpecialLayout
<span class="token punctuation">---</span>

</code></pre></div><p>这将会为当前的页面渲染 <code>.vuepress/components/SpecialLayout.vue</code> 布局。</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新：</span><span class="time">2021-03-21 20:11</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><svg aria-hidden="true" class="icon"><use xlink:href="#icon-left"></use></svg> <a href="/docs/vue/create-project.html" class="prev">Vue 快速搭建项目</a></span> <span class="next"><a href="/docs/vue/vuepress/markdown.html">Markdown 语法拓展</a> <svg aria-hidden="true" class="icon"><use xlink:href="#icon-right"></use></svg></span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/docs/assets/js/app.cdec4db9.js" defer></script><script src="/docs/assets/js/2.993bd611.js" defer></script><script src="/docs/assets/js/125.4e36fe37.js" defer></script><script src="/docs/assets/js/7.5a12abef.js" defer></script>
  </body>
</html>
